<template>
  <div class="img_main flex border-top-linear border-bottom-linear border-color">
    <img :src="require('@/assets/images/comprehensive/'+data.img)" alt="">
    <div class="img_title">
      <h4>{{ data.title}}</h4>
      <span><b>{{ data.amount }}</b> {{data.company}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImgList",
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.img_main {
  width: 100%;
  height:100%;
  align-items: center;
  padding:.5rem 1rem;
  //margin-top:1rem;
  img {
   width:26%;
    margin-right:1rem;


  }
  .img_title {
    text-align: left;
    h4{
      text-align: left;
      font-size: 1rem;
      color:#BFD9FF;
      line-height:2.4rem;
    }
    span{
      text-align:left;
      b{
        font-size: 1.4rem;
        matgin-right:.5rem;
        color:#00FFFF;
      }
    }
  }
}
</style>
